<template>
  <!-- 工作台相关 -->
  <div class="go-ContentEdit">
         <!-- @activated="print('activated')"
        @deactivated="print('deactivated')"
        @drag-start="print('drag-start')"
        @resize-start="print('resize-start')"
        @dragging="print('dragging')"
        @resizing="print('resizing')"
        @drag-end="print('drag-end')"
        @resize-end="print('resize-end')" -->
         <DraggableContainer
             :grid="grid" 
         >
         <Vue3DraggableResizable
         
         
    v-for="(item,index) in chartData" :key="index"
   
          :handles="['br']"
        :minH="320"
         v-model:x="item.data.styles.x" 
           v-model:y="item.data.styles.y" 
            v-model:w="item.data.styles.w" 
           v-model:h="item.data.styles.h" 
            @resize-end="resizeEnd(item.data.styles,item)"
               @drag-end="dragEnd(item.data.styles,item)"
        :initH="item.data.styles.initH"
         :initW="item.data.styles.initW"
        >
      <div :style="{
        height: '100%',
        background:themeVars.bodyColor,
        width: item.data.styles.w-2 + 'px',
      }">
   
    <div v-if="item.data.options.id" class="h100 aic jcc w100">
      <tableS2 :type="item.data.targetComponentData.type"
       :s2DataConfig="item.data.options"
         v-if="item.data.targetComponentData.render == ComponentBiType.TABLES2"
       :styles="item.data.styles"
      >
       

      </tableS2>

           <commonCharts :type="item.data.targetComponentData.type"
       :s2DataConfig="item.data.chartConfig"
         v-if="item.data.targetComponentData.render == ComponentBiType.COMMONCHARTS"
       :styles="item.data.styles"
      />
    </div>
     
  </div>
  </Vue3DraggableResizable>
      </DraggableContainer>

   
  </div>
</template>

<script setup lang="ts">
//数据集
import { ref, watch, nextTick,onMounted} from 'vue'
import { PieChartSharp, PulseSharp, PodiumSharp, Newspaper, ReorderFour } 
from '@vicons/ionicons5'
import { renderIcon } from '@/utils'
import {  ComponentBiType } from '@/enums/editReportEnum'
import tableS2 from '@/views/Bi/editReport/components/component/editComponent/tableS2/index.vue'
import commonCharts from '@/views/Bi/editReport/components/component/editComponent/Common/index.vue'
import { useThemeVars } from 'naive-ui'
 import { useReportStore } from '@/views/Bi/store/useReportStore'
import Vue3DraggableResizable from 'vue3-draggable-resizable'
import { DraggableContainer } from 'vue3-draggable-resizable'
//default styles
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
import { useTargetData } from '@/views/Bi/hooks/useTargetData'
 import {
  GridLayout,GridItem
 } from 'vue-grid-layout';
 const  gridWidthpx = '40px'
const  gridWidth = 40
 const  contentHeight =(300*gridWidth) +'px'
const themeVars = useThemeVars()
const grid =ref([gridWidth,gridWidth])
const reportStore = useReportStore()
const onEnd = (e: any) => {
 
}
const props = defineProps({

  chartData:{
    type:Array,
    default:()=>[]
  }
})



//表格监听数据 start

//表格监听数据 end
const targetComponentData = ref(null)
const Refresh = ref(true)
const x = ref(0)
const y = ref(0)
const resizeEnd = (item: any,data:any) => {
   const { targetData } = useTargetData()
   const half  =gridWidth/2
  nextTick(()=>{
    const complementationW = item.w%gridWidth
    const complementationH = item.h%gridWidth
    // debugger
     
    if(complementationW>0&&complementationW>=half){
      //新增 距离
      const Addnumber =  gridWidth- complementationW
       item.w = item.w+Addnumber
    }else  if(complementationW>0&&complementationW<half){
      //新增 距离
       item.w = item.w-complementationW
    }

    if(complementationH>0&&complementationH>=half){
      //新增 距离
       const Addnumber =  gridWidth- complementationH
       item.h = item.h+Addnumber
    }else  if(complementationH>0&&complementationH<half){
      //新增 距离
       item.h = item.h-complementationH
    }

     item.initH = item.h;
  item.initW = item.w;
  })


//
}
function isOverlap(rect1:any, rect2:any) {
    return !(rect1.x + rect1.w < rect2.x ||
             rect1.y + rect1.h < rect2.y ||
             rect1.x > rect2.x + rect2.w ||
             rect1.y > rect2.y + rect2.h);
}

function moveDownIfOverlap(arr:any, newRect:any) {
    for (let i = 0; i < arr.length; i++) {
      let zindexNext = arr[i].data.styles
        if (isOverlap(newRect, zindexNext)) {
            // newRect.y += arr[i].data.styles.h;
           let pingjun =   zindexNext.y + zindexNext.h - (zindexNext.h/2)
           // 
          //  
           if(newRect.y>pingjun){
            //说明拖拽元素在覆盖元素下面
            newRect.y = zindexNext.y + zindexNext.h;
           }else{
            //说明拖拽元素在覆盖元素上面
            newRect.y = zindexNext.y -newRect.h  ;
           }
              return newRect;
        }
    }
      return newRect;
}

const dragEnd = (item: any,data:any) => {
    console.log('item :>> ',props.chartData,);
     const complementationx = item.x/gridWidth
    const complementationy =item.y/gridWidth
     if(complementationx>0){
        const strX = String(complementationx).split(".")
        if(strX.length==1){
          //说明刚好
        }else{
          //说明没对齐
          const computedX = Number(strX[0])
          const computedPrintX = Number(`0.${strX[1]}`)
          //获取当前求 增加减少数据量
          const numberAdd = item.x-(computedX*gridWidth)
          if(computedPrintX>=0.5){
           item.x = item.x + (gridWidth-numberAdd) 
          }else{
             item.x = item.x - numberAdd
          }
        }
     }
     if(complementationy>0){
         const strY = String(complementationy).split(".")
        if(strY.length==1){
          //说明刚好
        }else{
          //说明没对齐
          const computedY = Number(strY[0])
          const computedPrintY = Number(`0.${strY[1]}`)
          //获取当前求 增加减少数据量
          const numberAdd = item.y-(computedY*gridWidth)
          if(computedPrintY>=0.5){
           item.y = item.y + (gridWidth-numberAdd) 
          }else{
             item.y = item.y - numberAdd
          }
        }
     }
      // reportStore.setBiReportData(data)
    // let newRect =    moveDownIfOverlap(props.chartData, JSON.parse(JSON.stringify(item)))
    // console.log('item 11:>> ', newRect);
    // Object.assign(item,newRect)
      
}
</script>

<style lang="scss" scoped>
$gridWidth : 60px;
@include go('ContentEdit') {
  user-select: none;
  height: v-bind('contentHeight');
  box-sizing: border-box;
  overflow: auto;
  background-color: #FFF;
   background: linear-gradient(-90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px) 0% 0% / v-bind('gridWidthpx') v-bind('gridWidthpx'), 
   linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px) 0% 0% / v-bind('gridWidthpx') v-bind('gridWidthpx') #FFF;


}

</style>
